<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<title>定义了项目在主轴上的对齐方式</title>
		<style type="text/css">
				.content {
					display: flex;
					width: 100%;
					/* height: 300px;
					flex-direction: column; */
					flex-wrap: wrap;
					justify-content:space-around;
					/* flex-start（默认值）：左对齐
					flex-end：右对齐
					center： 居中
					justify-content:space-between;
					space-between：两端对齐，项目之间的间隔都相等。
					space-around：每个项目两侧的间隔相等。 */
				}
		
				.item {
					width: 48%;
					border: #000000 1px solid;
				}
			</style>
		</head>
		<body>
			<div class="content">
				<div class="item">
					子元素1
				</div>
				<div class="item">
					子元素2
				</div>
				<div class="item">
					子元素3
				</div>
				<div class="item">
					子元素4
				</div>
				
			</div>
			
	</body>
</html>
